<!DOCTYPE html><html><head><title>11-float浮动</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="11-float浮动">11-float浮动</h1>

<h3 id="一float浮动">一、float浮动</h3>



<h4 id="1浮动的一般情况">1、浮动的一般情况</h4>

<p>float:指定一个元素是否应该浮动</p>

<blockquote>
  <p>float:none     不浮动(默认) <br>
  float:left      左浮动  <br>
  float:right     右浮动</p>
</blockquote>



<h4 id="2浮动的特殊情况">2、浮动的特殊情况</h4>

<p>浮动的元素会脱离文档流</p>

<blockquote>
  <p>1、如果只给前面的盒子浮动，后面的元素要占据它的位置 <br>
  2、给了浮动的元素，只会影响后面的元素； <br>
  3、如果父级宽度太窄，无法容纳所有的浮动元素，无法容纳的浮动元素会往下掉； <br>
  4、如果浮动元素的高度不同，父级宽度太窄，那么当它们往下掉时可能被其它浮动元素“卡住”</p>
</blockquote>



<h4 id="3浮动对文字的影响">3、浮动对文字的影响</h4>

<p>浮动的元素虽然会脱离正常的文档流，但它还是会影响正常文档流中的文字排版</p>



<h3 id="二float浮动特征和inline-block特征的对比">二、float浮动特征和inline-block特征的对比</h3>



<h4 id="1float浮动后的特征">1、float浮动后的特征：</h4>

<blockquote>
  <ul><li>1、块级 （横排显示）</li>
  <li>2、内联 支持宽高</li>
  <li>3、默认内容撑开宽度</li>
  <li>4、支持margin</li>
  <li>5、脱离文档流</li>
  <li>6、提升层级半层 </li>
  </ul>
</blockquote>

<p><code>问题：不支持margin:auto;</code></p>



<h4 id="2inline-block的特征和问题">2、Inline-block的特征和问题</h4>

<blockquote>
  <ul><li>1、块级可以（横排展示）</li>
  <li>2、内联 标签支持宽高</li>
  <li>3、默认 内容撑开宽度</li>
  <li>4、支持margin</li>
  </ul>
</blockquote>

<p><code>问题： <br>
1、标签间空格 被解析 <br>
2、不支持margin:auto;</code></p>



<h3 id="三清除浮动">三、清除浮动</h3>



<h4 id="1float浮动问题会造成元素父级高度塌陷">1、float浮动问题：会造成元素父级高度塌陷</h4>

<p><strong>清除浮动：</strong><code>clear:left | right | both ;</code>规定元素的哪一侧不允许其他浮动元素。</p>



<h4 id="2多种解决办法">2、多种解决办法：</h4>



<h5 id="1在浮动元素后面增加一个子元素">1)、在浮动元素后面增加一个子元素</h5>



<pre class="prettyprint hljs-dark"><code class="hljs stylus"><div class="hljs-line"><span class="hljs-comment">//css代码</span>
</div><div class="hljs-line">.<span class="hljs-attribute">clear</span>{
</div><div class="hljs-line">    <span class="hljs-attribute">clear</span>:both;
</div><div class="hljs-line">}
</div><div class="hljs-line"><span class="hljs-comment">//html代码</span>
</div><div class="hljs-line">&lt;<span class="hljs-selector-tag">div</span> class=<span class="hljs-string">'clear'</span>&gt;&lt;div&gt;
</div></code></pre>



<h5 id="2给父级元素加固定高度">2)、给父级元素加固定高度</h5>

<p><code>问题：扩展性不好</code></p>



<h5 id="3父级元素设置overflowhidden">3、父级元素设置overflow:hidden</h5>

<p><code>问题：需要配合宽度</code></p>



<h5 id="4使用after伪元素内部末尾添加内容">4、使用:after伪元素内部末尾添加内容</h5>

<p><code>推荐使用</code></p>



<pre class="prettyprint hljs-dark"><code class="hljs stylus"><div class="hljs-line"><span class="hljs-comment">//css代码</span>
</div><div class="hljs-line"><span class="hljs-selector-class">.clear</span>:after{
</div><div class="hljs-line">    <span class="hljs-attribute">content</span>:<span class="hljs-string">''</span>;
</div><div class="hljs-line">    <span class="hljs-attribute">display</span>:block;
</div><div class="hljs-line">    <span class="hljs-attribute">clear</span>:both;
</div><div class="hljs-line">}
</div><div class="hljs-line"><span class="hljs-comment">//html代码</span>
</div><div class="hljs-line">&lt;<span class="hljs-selector-tag">div</span> class=<span class="hljs-string">'clear'</span>&gt;&lt;div&gt;
</div></code></pre>



<h3 id="四min-width的运用">四、min-width的运用</h3>



<h4 id="1min-width给元素设置最小宽度">1、min-width:给元素设置最小宽度</h4>

<blockquote>
  <p><strong>作用:</strong>当浏览器窗口的宽度达到设定的最小宽度时，该元素宽度不再自适应，而是部分元素被遮挡住。</p>
</blockquote>



<h4 id="2max-width给元素设置最大宽度">2、max-width:给元素设置最大宽度</h4>

<blockquote>
  <p><strong>作用:</strong>当浏览器窗口的宽度达到设定的最大宽度时，该元素宽度不再自适应，而是部分元素被遮挡住。</p>
</blockquote></div></body></html>